<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">
   <h:head id="head">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Remote car monitoring cloud application!</title>
      <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
   </h:head>
   <h:body id="body">
		<h:panelGroup rendered="#{authentication.authenticated}">
			<p:growl id="growl" showDetail="true"/>
			<div>
				Hello, #{authentication.nickname}.
				|
				<a href="index.jsf">All cars</a>
				|
				<a href="remotemonitor.apk">Download mobile app</a>
				|
				<a href="#{authentication.logoutURL}">Sign out</a>
			</div>
			<h:form>
				<p:panelGrid columns="2" style="margin-top: 20px">
					<h:panelGroup>
						<h:outputText value="id: #{historyController.car.id}"/>
						<br/>
						<h:outputText value="#{historyController.car.brand}"/>
						<br/>
						<h:outputText value="#{historyController.car.model}"/>
						<br/>
						<h:outputText value="#{historyController.car.description}"/>
						<br/>
					</h:panelGroup>
					<h:panelGroup>
						<p:panelGrid id="filter" columns="4" style="margin-top: 5px;">
							PARAMETER
							<h:selectOneMenu value="#{historyController.ecuParam}">
								<f:selectItems value="#{historyController.allParameters}" />
							</h:selectOneMenu>
							DATE
							<p:calendar pattern="MM/dd/yyyy" value="#{historyController.date}" timeZone="GMT+3"
								effect="slideDown" required="true" requiredMessage="Date value is Required"/>
							FROM
							<p:calendar pattern="HH:mm" value="#{historyController.timeFrom}" timeZone="GMT+3"
								timeOnly="true" effect="slideDown" required="true" requiredMessage="Time From is Required"/>
							TO
							<p:calendar pattern="HH:mm" value="#{historyController.timeTo}" timeZone="GMT+3"
								timeOnly="true" effect="slideDown" required="true" requiredMessage="Time To is Required"/>
						</p:panelGrid>
						Results per page:
						<h:selectOneMenu value="#{historyController.pageSize}">
							<f:selectItem itemValue="5"/>
							<f:selectItem itemValue="10"/>
							<f:selectItem itemValue="15"/>
							<f:selectItem itemValue="20"/>
							<f:selectItem itemValue="25"/>
							<f:selectItem itemValue="30"/>
							<f:selectItem itemValue="35"/>
							<f:selectItem itemValue="40"/>
						</h:selectOneMenu>
						<h:commandButton action="#{historyController.executeAction}"  value="Show param" style="margin-top: 3px;">
							<f:setPropertyActionListener target="#{historyController.action}" value="CHART" />
						</h:commandButton>
						<h:commandButton action="#{historyController.executeAction}" value="Show track" style="margin-top: 3px;">
							<f:setPropertyActionListener target="#{historyController.action}" value="MAP" />
						</h:commandButton>
					</h:panelGroup>
				</p:panelGrid>
			</h:form>
			<h:form>
				<p:panel style="margin-top: 20px;" rendered="#{historyController.action == 'CHART'}">
					<h:panelGroup rendered="#{not historyController.paramDataFound}">
						<h:outputLabel value="No records found."/>
						<br/>
					</h:panelGroup>
					<p:barChart id="chart" value="#{historyController.chart}" rendered="#{historyController.paramDataFound}"
    					title="Activity" style="margin:20px 0 20px 0;" legendPosition="ne"/>
    				<h:commandButton value="Previous" action="#{historyController.previous}" 
    					disabled="#{historyController.previousDisabled}"/>
    				<h:commandButton value="Next" action="#{historyController.next}" 
    					disabled="#{historyController.nextDisabled}"/>
    			</p:panel>
    			<p:panelGrid rendered="#{historyController.action == 'MAP'}"
    				columns="2" style="margin-top: 20px; width: 900px;">  
    				<p:gmap center="#{historyController.mapCenter}" zoom="13" type="ROADMAP" 
    					style="width:750px;height:400px" model="#{historyController.polylineModel}"/>
    				<h:panelGroup style="margin: 2px 2px 2px 2px;">
    					<p:dataTable id="Coordinates" value="#{historyController.coordinates}" 
								var="coord" style="width: 450px;">
							<p:column>
								<f:facet name="header">
									Lat
								</f:facet>    
								<h:outputText value="#{coord.lat}"/>
							</p:column>
							<p:column>
								<f:facet name="header">
									Lng
								</f:facet>    
								<h:outputText value="#{coord.lng}"/>
							</p:column>
						</p:dataTable>
    					<h:commandButton value="Previous" action="#{historyController.previous}" 
    						disabled="#{historyController.previousDisabled}"/>
    					<h:commandButton value="Next" action="#{historyController.next}" 
    						disabled="#{historyController.nextDisabled}"/>
    				</h:panelGroup>
    			</p:panelGrid>
			</h:form>
		</h:panelGroup>
		<h:panelGroup rendered="#{not authentication.authenticated}">
			|
			<a href="#{authentication.loginURL}">Sign in</a>
			|
			<a href="remotemonitor.apk">Download mobile app</a>
			|
		</h:panelGroup>
   </h:body>
</html>